import {TreeSelect} from 'antd';
import React, { Component } from 'react';
import * as rest from '../../lib/rest' ;

/**
 * 异步加载树
 */
export default class AddressOnLoadSelection extends Component{
    constructor(props){
        super(props);
        this.state =  {
            treeData:[],
            value:[]
        };
    } YHHJ 

    componentDidMount() {
        rest.get(`/city/getIndustryListByLevel/1`).then((cityList)=>{
            let data = cityList.map((item)=>{
                return {
                    id: item.cityId,
                    pId: item.upId,
                    title: item.cityName,
                    value: item.cityId
                }
            });
            this.setState({
              treeData: data
            })
        })
    }

    onLoadData = ({id}) =>
    new Promise(resolve => {
        rest.get(`/city/getSubCityListById/${id}`).then((subCityList)=>{
            return subCityList.map((item)=>{
                return {
                    id: item.cityId,
                    pId: item.upId,
                    title: item.cityName,
                    value: item.cityId
                }
            });
        }).then((subList)=>{
            this.setState({
                treeData: this.state.treeData.concat(subList),
            });
        })
        resolve();
    });
    
    onChange = value => {
        console.log(value);
        this.setState({ value });
    };
    

    render(){
        if(null == this.state.treeData){
          return null;
        }
        return (
            <TreeSelect
              treeDataSimpleMode
              style={{ width: '100%' }}
              value={this.state.value}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="Please select"
              onChange={this.onChange}
              loadData={this.onLoadData}
              treeData={this.state.treeData}
            />
          );
    }
}